{extend name="common/dialog" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/common/css/jquery-ui.css" media="all">
<script type="text/javascript" src="__STATIC__/common/js/jquery-ui.js"></script>
<style type="text/css">
    @media screen and (min-width: 768px){
      .layui-container {
          width:95%;
      }
    }

</style>
{/block}
{block name="main"}
<div class="layui-container" style="padding: 0;">
  <div class="view-content" style="margin:35px 0;">
   <div class="layui-row" style="position: relative;">
        <div class="layui-col-xs6" style="padding-right: 45px;">
          <div class="grid-demo grid-demo-bg1" >
             <div class="view-content-border">
               <div class="layui-row">
                <div class="layui-col-xs2">
                  <?php if($row['type'] == 3):?>
                  <i class="icon icon-onedrive netword-icon" ></i>
                  <?php else:?>
                  <i class="icon icon-earth netword-icon"></i>
                  <?php endif?>
                 
                </div>
                <div class="layui-col-xs10">
                  <div class="network-local">{$row['locallabel']}</div>
                  <div class="network-address">{$row['locatlabeladdress']} </div>
                </div>
               </div>
             </div>
          </div>
          
        </div>
        <div class="layui-col-xs6" style="padding-left: 45px;">
          <div class="view-content-border">
            <div class="layui-row">
                <div class="layui-col-xs2">
                 <?php if($row['endtype'] == 3):?>
                  <i class="icon icon-onedrive netword-icon" ></i>
                  <?php else:?>
                  <i class="icon icon-earth netword-icon"></i>
                  <?php endif?>
                </div>
                <div class="layui-col-xs10">
                  <div class="network-local">{$row['endclou']}</div>
                  <div class="network-address">{$row['endlabeladdress']}</div>
                </div>
               </div>
          </div>
           
        </div>
        </div>
        <span class="lricon-ler" style="top:35px">
        </span>
      </div>
  <div class="view-tab">
    <form action="{:U('renewal')}" class="layui-form nerwork-like" id="_form">
      <input name="netword_id" value="{$row['id']}" type="hidden" />
      <input name="total" value="0" type="hidden" id="_total"/>
      <div class="layui-col-xs6" style="padding-right: 25px;">
        <br/>
        <br/>
        <div class="layui-form-item">
            <label class="layui-form-label" >{:lang('English Name')}</label>
            <div class="layui-input-6">
                <input type="text" name="enddate" id="_enddate" disabled value="{$row['enddate']|default="--"}" class="layui-input  input-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" >{:lang('Renewal Time')}</label>
            <div class="layui-input-6">
                <select name="daylength"  lay-filter="_daylength" lay-verify="required" id="daylength" class="layui-input">
                 <option value="">{:lang('Please Choose')}</option>
                 <?php foreach($daLength as $dindex=>$d):?>
                  <option value="{$dindex}"  >{$d}</option>
                  <?php endforeach;?>
              </select>
            </div>
        </div>
      </div>
    
    <div style="position: fixed;bottom:15px;right: 20px;font-size: 16px;">
      <p >
        <span style="color: #fff;"><span >{$row['broadband']} </span>Mbps</span>&nbsp;&nbsp;&nbsp;<b style="display: none;color: #f00;" id="price-money">{:lang('Configuration Cost:')} {$row['total']} / {:lang('Month')}</b>
       <button type="button" id="_submit" class="layui-btn layui-btn-disabled" lay-submit="" lay-filter="submit">{:lang('Finish')}</button></p>
       </p>
</form>
</div>
</div>
  </div>
      
</div>
{/block}
{block name="footer"}
  <script>

  layui.use(['form', 'layer','laydate'], function () {
      var form = layui.form, layer = layui.layer,$= layui.jquery,laydate = layui.laydate;
      form.on('submit(submit)', function (data) {
        var _this = $(this);
          if(_this.hasClass('layui-btn-disabled')){
            return false;
          }
          loading = layer.load(1,{shade:[0.1,'#fff']});
          // 提交到方法 默认为本身
          _this.addClass('layui-btn-disabled');
          _post($("#_form").attr('action'), data.field, function (res) {
              layer.close(loading);
              $("#_submit").removeClass('layui-btn-disabled');
              if (res.code  > 0) {
                  layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                      top.location.href = res.url;
                  });
              } else {
                  layer.msg(res.msg, {time: 1800, icon: 2});
              }
          });
      });
      form.on("select(_daylength)",function(data){
            $("#_update_ends").show();
            if(data.value == '' || data.value == null){
                $("#_submit").addClass('layui-btn-disabled');
                $("#price-money").html('');
                return null;
            }
            $("#price-money").show();
            $("#_submit").addClass('layui-btn-disabled');
            _alculator({
                url:"{:U('query',['network_id'=>$row['id'],'auto'=>2])}",
                data:$("#_form").serializeArray(),
                notice:"{:lang('The cost is being calculated....')}"
            },function(res){
                $("#_submit").removeClass('layui-btn-disabled');
                if(res.code == 1){
                    $("#price-money").html(res.msg);
                    
                    $("#_total").val(res.total)
                }else{
                  $("#_total").val(0)
                }
            })
      })
      
  })
  
  </script>
{/block}